<template>
    <div class="active-detail">
      <div class="nav-bar"></div>

      <div class="banner">
        <img src="http://ktv.guagua.cn/group1/M01/0E/5F/PZvEFVzriC6AZqA_AAAr-69gD00778.jpg">
      </div>

      <div class="sign-up">
        <div class="enrolment">
          <p>全国百校进课堂活动行</p>
          <i>已报名<span>358</span>人/限1000人报名</i>
        </div>
        <div class="sign-up-time">
          <p>距离活动报名截止还剩<span>02天20时34分10秒</span></p>
        </div>
      </div>

      <div class="active-info">
        <p class="time">01-01 17:00 至 03-15 17:00</p>
        <p class="money">￥276.00</p>
        <p class="sponsors">主办方：金凤凰国际教育</p>
      </div>

      <div class="detail">
        <div class="title"><h3>活动详情<b></b></h3></div>
        <div class="detail-banner">
          <img src="http://ktv.guagua.cn/group1/M01/0E/5F/PZvEFVzriC6AZqA_AAAr-69gD00778.jpg">
        </div>
        <div class="info">
          <p>拉到了发京东方垃圾袋放辣椒法拉第就发啦剪短发时代峻峰拉德芳斯杰拉德附件奥德赛龙卷风垃圾袋放辣椒带饭啦的翻身剧阿萨德龙卷风拉丝机带饭啦激发阿萨德龙卷风拉丝机带饭啦的设计费</p>
        </div>
      </div>

      <div class="btn">
        <a class="sign-up-btn">立即报名</a>
        <a class="invited-btn">邀请好友</a>
      </div>
    </div>
</template>

<script>
import nError from './../tpl/error'
import menuTpl from './../tpl/menuTpl'
export default {
    data(){
      return{}
    },
    created(){

    },
    methods:{
    },
    components:{
    }

}
</script>

<style scoped lang="scss">
  .active-detail{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 70%;

    .banner{
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;

      img{
        width: 100%;
        height: 100%;
      }
    }

    .sign-up{
      padding: .3rem;
      background-color: #FFF;

      .enrolment {
        p{font-size: .54rem;}

        i{
          padding: .2rem 0;
          display: block;
          font-style: normal;
          color: #adabab;

          span{
            color: #ff9a04;
          }
        }
      }

      .sign-up-time{
        padding: .3rem 0;
        border-top: 1px solid #dadada;

        p{font-size: .45rem;color: #7d7d7d}
        span{
          margin-left: .3rem;
          color: #ff9a04;
          font-weight: bolder;
        }
      }
    }

    .active-info{
      margin-top: .25rem;
      padding: .3rem;
      background-color: #FFF;

      p{padding: .3rem 0;font-size: .43rem}
      .money{color: #ff9a04}
      .money,.sponsors{border-top: 1px solid #dadada; }
    }

    .detail{
      margin-top: .25rem;
      padding: .3rem;
      background: #fff;

      .title{

        h3{
          padding: .3rem 0;
          text-align: center;
          font-size: .43rem;
        }

        b{
          margin: 0 auto;
          margin-top: .2rem;
          width: .9rem;
          height: .1rem;
          background: #eda968;
          display: block;
          border-radius: 1rem;
        }
      }

      .detail-banner{
        width: 100%;
        height: 4rem;
        img{
          width: 100%;
          height: 100%;
        }
      }

    }

    .btn{
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 1.5rem;
      display: flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
      background: #fff;

      a{
        height: 1rem;
        line-height: 1rem;
        margin-left: .2rem;
        flex: .46;
        font-size: .5rem;
        border-radius: 1rem;
        display: block;
        text-align: center;
        background: #ff9a04;
      }

      .invited-btn{background: #ffff00}

    }
  }
</style>
